<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Layout</title>
    <link rel="stylesheet" href="niivue.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="interpCheck">Smooth</label>
      <input type="checkbox" id="interpCheck" checked />
      <label for="dpiSelect">Resolution</label>
      <select id="dpiSelect">
        <option value="1" selected>Enable High DPI (best)</option>
        <option value="0">Disable High DPI</option>
        <option value="0.7">DPR = 0.7</option>
        <option value="0.5">DPR = 0.5</option>
        <option value="0.3">DPR = 0.3 (worst)</option>
      </select>
      <label for="renderMode">Volume Render Mode</label>
      <select id="renderMode">
        <option value="-1">slices</option>
        <option value="0" selected>matte</option>
        <option value="0.3">low</option>
        <option value="0.6">medium</option>
        <option value="1.0">high</option>
      </select>
      <label for="timelineCheck">&nbsp; Timeline</label>
      <input type="checkbox" id="timelineCheck" unchecked />
      <label for="padSlider">Padding</label>
      <input
        type="range"
        min="0"
        max="10"
        value="5"
        class="slider"
        id="padSlider"
      />
      <label for="layoutSelect">Layout</label>
      <select id="layoutSelect">
        <option value="0" selected>Auto</option>
        <option value="1">Column</option>
        <option value="2">Grid</option>
        <option value="3">Row</option>
      </select>
      <label for="renderingSelect">Rendering</label>
      <select id="renderingSelect">
        <option value="0">Never</option>
        <option value="1">Always</option>
        <option value="2" selected>Auto</option>
      </select>
      <label for="heroSlider">Hero Image</label>
      <input
        type="range"
        min="0"
        max="9"
        value="0"
        class="slider"
        id="heroSlider"
      />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  interpCheck.onchange = function () {
    nv1.setInterpolation(!this.checked)
  }
  dpiSelect.onchange = function () {
    let dpr = Number(this.value)
    if (dpr === 0) {
      nv1.setHighResolutionCapable(-1)
    } else if (dpr === 1) {
      nv1.setHighResolutionCapable(0)
    } else {
      nv1.setHighResolutionCapable(dpr)
    }
  }
  padSlider.oninput = function () {
    nv1.setMultiplanarPadPixels(this.value)
  }
  heroSlider.oninput = function () {
    nv1.setHeroImage(this.value * 0.1)
  }

  timelineCheck.onchange = function () {
    nv1.graph.autoSizeMultiplanar = this.checked
    nv1.drawScene()
  }
  layoutSelect.onchange = function () {
    nv1.setMultiplanarLayout(Number(this.value))
  }
  renderMode.onchange = function () {
    nv1.setVolumeRenderIllumination(parseFloat(this.value))
  }
  renderingSelect.onchange = function () {
    nv1.opts.multiplanarShowRender =  Number(this.value)
    nv1.drawScene()
  }
  var volumeList1 = [{url: "../images/pcasl.nii.gz"},]
  let opts = {
    logLevel: 'debug',
    show3Dcrosshair: true,
    backColor: [0.64, 0.76, 0.68, 1],
  }
  var nv1 = new niivue.Niivue(opts)
  await nv1.attachTo("gl1")
  nv1.setMultiplanarPadPixels(5)
  nv1.graph.opacity = 1.0
  await nv1.loadVolumes(volumeList1)
</script>